<template>
  <div class="left-top-border" :class="[type && `border-${type}`]" v-bind="$attrs"></div>
  <div class="left-bottom-border" :class="[type && `border-${type}`]" v-bind="$attrs"></div>
  <div class="right-bottom-border" :class="[type && `border-${type}`]" v-bind="$attrs"></div>
  <div class="right-top-border" :class="[type && `border-${type}`]" v-bind="$attrs"></div>
  <template v-if="type === 'hexa'">
    <div class="border-hexa right-top-horizontal-border" v-bind="$attrs"></div>
    <div class="border-hexa center-top-border" v-bind="$attrs"></div>
  </template>
</template>
<script lang="ts" setup name="CardBorder">
const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
});
</script>
<style lang="scss" scoped>
.border-default {
  background: rgba(25, 53, 84, 1);
  height: 20px;
  width: 2px;

  &.left-top-border {
    @apply absolute left-[0px] top-[0px];
    transform: skewX(135deg);
  }

  &.left-bottom-border {
    @apply absolute left-[0px] bottom-[0px];
    transform: skewX(45deg);
  }

  &.right-bottom-border {
    @apply absolute right-[0px] bottom-[0px];
    transform: skewX(135deg);
  }

  &.right-top-border {
    @apply absolute right-[0px] top-[0px];
    transform: skewX(45deg);
  }
}

.border-hexa {
  background: rgba(9, 75, 130, 1);
  height: 20px;
  width: 3px;
  z-index: 3;

  &.left-top-border {
    @apply absolute left-[0px] top-[0px];
    transform: skewX(135deg);
  }

  &.left-bottom-border {
    @apply absolute left-[0px] bottom-[0px];
    transform: skewX(45deg);
  }

  &.right-bottom-border {
    @apply absolute right-[0px] bottom-[0px];
    transform: skewX(135deg);
    width: 2.5px;
  }

  &.right-top-border {
    @apply absolute right-[-1px] top-[10px];
    transform: skewX(45deg);
    width: 2px;
  }

  &.right-top-horizontal-border {
    @apply absolute top-[9px];
    left: calc(70.4% + 10px);
    background-color: rgba(9, 75, 130, 1);
    height: 2px;
    width: calc(100% - 70.4% - 10px);
  }

  &.center-top-border {
    @apply absolute top-[0px];
    left: calc(70.4% + 10px);
    width: 2px;
    height: 20px;
    transform: skewX(45deg) translateY(-10px);
  }
}
</style>
